使用Unity 2019 LTS

目標

• 認識紋理貼圖(Texture)
• 程式與美術口中的Texture

當匯入一張圖到Unity...

當我們匯入一張圖進入Unity時，點擊圖片會在Inspector看到圖(1)這些資訊。

圖(1)

注意: 使用不同版本，面板資訊會有所不同

下面介紹三個重要且常見的屬性：Texture Type、Wrap Mode、Filter Mode

Texture Type

圖(2)

最常用的是Default、Normal map、Sprite、Lightmap，筆者目前只用過Default、Normal map、Sprite，Lightmap沒用過，所以先講講其他三個。

• Default是最基本的紋理貼圖類型。
• Sprite則是在UI的時候會用到，記得以前筆者剛學Unity時，發現圖片怎麼沒辦法附在UI上，通常都是因為沒有轉化他的類型。
• Normal map最常見是用在「法線貼圖」這項視覺效果技術，如果讀者在網路上下載3D模型的時候，常會看到這個模型的紋理貼圖中，有一張「藍藍的」貼圖，那個就是法線貼圖。

Wrap Mode

圖(3)

載進Unity的圖片有各式各樣的大小，可能是256x256、1024x1024，最終都會被歸一化(Normalized)至[0, 1]這個區間，但紋理再進行取樣的時候，可能不會在這個區間，這時Wrap Mode就是決定當座標超過[0, 1]的時候，要使用甚麼方式進行延展。通常會用兩種方式，一種是Repeat，另一種是Clamp。

Filter Mode

圖(4)

Filter Mode有三種類型，Point、Bilinear、Trilinear，效果會依序提升，同時消耗的效能也會提高。濾波會影響到紋理放大縮小時的圖片品質。

圖(5)
對於紋理的縮放與品質，就得說到一種技術，多級漸遠紋理(mipmapping)。試想一下以下這個問題：

假若一張紋理貼圖離相機很遠，遠到從相機看只有一個點，那需不需要繪製這種高清的貼圖呢?

很明顯的，為了效能，這是不用的，而多級漸遠紋理就是在解決這樣資源浪費(繪製時間)的問題，但根據等價交換原則，有了時間，必須犧牲空間，多級漸遠紋理必須耗費空間去存儲這些不同層級的紋理。

開始撰寫!

以下配合Day8的Blinn-phong來實作我們的紋理映射(Texture mapping)，會像之前一樣，在新出現的地方寫上註解，這邊我選了我的頭貼都作範例：

圖(6)

Shader "Learning/TextureMapping"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        // 紋理貼圖預設值為"white{}"
        _MainTex ("Texture", 2D) = "white" {}
        _Specular ("Specular Color", Color) = (1,1,1,1)
        _Gloss ("Gloss", Range(8, 256)) = 32
    }
    SubShader
    {
        Tags { "RenderType"="ForwardBase" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            #include "Lighting.cginc"

            struct v2f
            {
                float4 pos : SV_POSITION;
                // 新增一個紋理座標屬性
                // 在fragment shader中會利用這個座標對貼圖取樣
                float2 uv : TEXCOORD0;
                // worldPos並不是第二組紋理座標
                // 而是利用它個空間存取頂點的世界座標
                float3 worldPos : TEXCOORD1;
                float3 worldNormal : NORMAL;
            };

            sampler2D _MainTex;
            
            // ST表示_MainTex的縮放(scale)、位移(translation)
            // 圖(7)可以看到MainTex對映著ST的屬性，Tiling & Offset
            // 對使用的紋理屬性加上"_ST"，可以直接獲取他的Tiling、Offset屬性
            float4 _MainTex_ST;
            fixed4 _Color;
            fixed4 _Specular;
            float _Gloss;

            v2f vert (appdata_base v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // tex2D(texture, uv) <- 對貼圖取樣
                fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color;
                // 以下為 Blinn-phong
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT * albedo;

                fixed3 worldNormalDir = normalize(i.worldNormal);

                fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);

                fixed diffIntensity = saturate(dot(worldNormalDir, worldLightDir));

                fixed3 diffuse = _LightColor0.rgb * albedo * diffIntensity;

                fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos);

                fixed3 halfwayDir = normalize(worldLightDir + viewDir);

                fixed specIntensity = pow(saturate(dot(worldNormalDir, halfwayDir)), _Gloss);

                fixed3 specular = _LightColor0.rgb * _Specular.rgb * specIntensity;

                return fixed4(ambient + diffuse + specular, 1);
            }
            ENDCG
        }
    }
    FallBack "Specular"
}

圖(7)

圖(8)

怎麼貼上去的?

下面的一張圖，我認為很清楚地描述，一張2D的圖是怎麼貼上凹凸不平的複雜模型的：

from Texture Mapping Real-World Objects with Hydrographics

你的Texture不是我的Texture

在還沒入門遊戲開發的時候，就有聽過「Texture」或是「紋理」一詞，當時的對它們的解釋是「一張圖」，沒了。

後來，開始入門遊戲開發的時候，除了Texture一詞還碰到了Sprite(註1)，到這時都只認為是「一張圖」，直到遇到了「RenderTexture」，才意識到美術與程式口中說的「Texture」或許是不同的東西，我以前所知道的Texture是美術所認識的Texture，而程式口中的Texture最直白的講就是一段連續的資料儲存在GPU的空間，包括長、寬、RGB通道數這些屬性。

註1: 我查到的翻譯不是小精靈就是某知名碳酸汽水，感覺都不對，所以我之後都會直接叫做sprite

Reference

• candycat1992/Unity_Shaders_Book
• Texture 是什么
• 一文看懂材质/纹理 Material, Texture, Shading, Shader 的区别